import Taro, { Component, Config } from '@tarojs/taro'

import { AtList, AtListItem, AtToast } from 'taro-ui'

import { View, Image, Text } from '@tarojs/components'

import YContentPadded from '../../../components/YContentPadded'
import YTableDivider from '../../../components/YTableDivider'

import CLoverIcon from '../../../assets/cloverActive@2x.png'

import './Records.scss'

export default class extends Component {
  config: Config = {
    navigationBarTitleText: '我的中奖纪录',
    enablePullDownRefresh: true,
    backgroundColor: '#ccc'
  }

  state = {
    isOpened: false
  }

  componentWillMount() {
    Taro.login().then(msg=>console.log(msg))
  }

  onClick = (msg) => {
    console.log(msg, 123)
  }

  onPullDownRefresh() {

    console.log('--------下拉刷新-------')
    Taro.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(() => {
      // complete
      Taro.hideNavigationBarLoading() //完成停止加载
      Taro.stopPullDownRefresh() //停止下拉刷新
    }, 2000)

  }

  onReachBottom() {

    this.setState(state => ({
      ...state,
      isOpened: true
    }))

    console.log('--------上拉刷新-------')
    setTimeout(() => {
      Taro.stopPullDownRefresh() //停止下拉刷新

      this.setState(state => ({
        ...state,
        isOpened: false
      }))

    }, 2000)

  }

  render() {
    return (
      <View className='GoodsUserProfile'>
        <AtToast
          isOpened={this.state.isOpened}
          text='加载中...'
          status='loading'
          hasMask={true}
        />
        <YTableDivider title='奖品一：阳澄湖大闸蟹' />
        <View className='tableCell'>
          <View className='title'>
            <Text className='text'>我种下的幸运草</Text>
          </View>
          <View className='navigate'>
            <Image src={CLoverIcon} mode='widthFix' className='icon' />
            <Text className='text'>+56</Text>
          </View>
        </View>
        <YContentPadded>
          <AtList>
            {
              Array.from(new Array(30)).map((i, k) => (
                <AtListItem
                  key={k}
                  thumb='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
                  extraThumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                  extraText='+56'
                  note='2018/08/02'
                  title='张晓东'
                />   
              ))
            }
          </AtList>
        </YContentPadded>       
      </View>
    )
  }
}
